<template>
	<view class="xybuilder-form-item">
        <!-- 分割线 -->
        <template v-if="item.type == 'divider'">
        </template>
        <!-- 静态文本 -->
        <template v-else-if="item.type == 'static'">
            <xy-list-item
                type="list"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    {{formValues[item.name]}}
                </template>
            </xy-list-item>
        </template>
        <!-- 跳转链接 -->
        <template v-else-if="item.type == 'staticUrl'">
            <xy-list-item
                type="input"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    <a :href="item.value" target="_blank">{{item.extra.placeholder}}</a>
                </template>
            </xy-list-item>
        </template>
        <!-- 文本框 -->
        <template v-else-if="item.type == 'text'">
            <xy-list-item
                type="input"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    <input
                        type="text"
                        class="input"
                        v-model="formValues[item.name]"
                        :placeholder="item.extra && item.extra.placeholder ? item.extra.placeholder : ''" />
                </template>
            </xy-list-item>
        </template>
        <!-- 密码 -->
        <template v-else-if="item.type == 'password'">
            <xy-list-item
                type="input"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    <input
                        type="text"
                        :password="true"
                        class="input"
                        v-model="formValues[item.name]"
                        :placeholder="item.extra && item.extra.placeholder ? item.extra.placeholder : ''" />
                </template>
            </xy-list-item>
        </template>
        <!-- URL网址 -->
        <template v-else-if="item.type == 'url'">
            <xy-list-item
                type="input"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    <input
                        type="text"
                        class="input"
                        v-model="formValues[item.name]"
                        :placeholder="item.extra && item.extra.placeholder ? item.extra.placeholder : ''" />
                </template>
            </xy-list-item>
        </template>
        <!-- 邮箱 -->
        <template v-else-if="item.type == 'email'">
            <xy-list-item
                type="input"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    <input
                        type="text"
                        class="input"
                        v-model="formValues[item.name]"
                        :placeholder="item.extra && item.extra.placeholder ? item.extra.placeholder : ''" />
                </template>
            </xy-list-item>
        </template>
        <!-- 数字 -->
        <template v-else-if="item.type == 'number'">
            <xy-list-item
                type="input"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    <input
                        type="number"
                        class="input"
                        v-model="formValues[item.name]"
                        :placeholder="item.extra && item.extra.placeholder ? item.extra.placeholder : ''" />
                </template>
            </xy-list-item>
        </template>
        <!-- 浮点型数字 -->
        <template v-else-if="item.type == 'digit'">
            <xy-list-item
                type="input"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    <input
                        type="digit"
                        class="input"
                        v-model="formValues[item.name]"
                        :placeholder="item.extra && item.extra.placeholder ? item.extra.placeholder : ''" />
                </template>
            </xy-list-item>
        </template>
        <!-- 手机号 -->
        <template v-else-if="item.type == 'tel'">
            <xy-list-item
                type="input"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    <input
                        type="number"
                        class="input"
                        v-model="formValues[item.name]"
                        :placeholder="item.extra && item.extra.placeholder ? item.extra.placeholder : ''" />
                </template>
            </xy-list-item>
        </template>
        <!-- 多行文本 -->
        <template v-else-if="item.type == 'textarea'">
            <xy-list-item
                type="list"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="info">
                    <textarea
                        :auto-height="false"
                        class=""
                        style="height: 100px"
                        v-model="formValues[item.name]"
                        :placeholder="item.extra && item.extra.placeholder ? item.extra.placeholder : ''" />
                </template>
            </xy-list-item>
        </template>
        <!-- 自定义数组 -->
        <template v-else-if="item.type == 'array'">
            <xy-list-item
                type="list"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="info">
                    <textarea
                        :auto-height="false"
                        class=""
                        style="height: 100px"
                        v-model="formValues[item.name]"
                        :placeholder="item.extra && item.extra.placeholder ? item.extra.placeholder : ''" />
                </template>
            </xy-list-item>
        </template>
        <!-- 下拉框 -->
        <template v-else-if="item.type == 'select' || item.type == 'radio'">
            <xy-list-item
                type="input"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    <xy-picker
                        style="width: 100%;font-size: 16px;"
                        v-model="formValues[item.name]"
                        :options="item.extra.options"
                        :placeholder="item.extra && item.extra.placeholder ? item.extra.placeholder : ''" />
                    </xy-picker>
                </template>
            </xy-list-item>
        </template>
        <!-- 复选框 -->
        <template v-else-if="item.type == 'checkbox' || item.type == 'selects'">
            <xy-list-item
                @click="item.showModal = true;"
                type="input"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    <template v-if="formValues[item.name].length > 0">
                        <text :key="key2" v-for="(value2,key2) in formValues[item.name]" class="m-r-xs">
                            {{item.extra.options[value2].title}}
                        </text>
                    </template>
                    <template v-else>
                        <text>点击选择</text>
                    </template>
                </template>
            </xy-list-item>
            <xy-modal v-model="item.showModal" :header="{show: true, title: item.title}" position="bottom">
                <xy-list v-model="formValues[item.name]">
                    <xy-list-item
                        type="list"
                        selectType="checkbox"
                        :title="item2.title + ''"
                        :key="index2"
                        :value="item2.value"
                        :checked="formValues[item.name].indexOf(item2.value) >= 0 ? true: false "
                        v-for="(item2,index2) in item.extra.options"
                        titleFs="14px">
                    </xy-list-item>
                </xy-list>
            </xy-modal>
        </template>
        <!-- switch -->
        <template v-else-if="item.type == 'switch'">
            <xy-list-item
                type="input"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    <xy-switch
                        :disabled="item.extra.disabled"
                        :true-value="item.extra.options[1].value"
                        :false-value="item.extra.options[0].value"
                        v-model="formValues[item.name]">
                    </xy-switch>
                </template>
            </xy-list-item>
        </template>
        <!-- slider -->
        <template v-else-if="item.type == 'slider'">
            <xy-list-item
                type="input"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    <xy-slider
                        :disabled="item.extra.disabled"
                        v-model="formValues[item.name]">
                    </xy-slider>
                </template>
            </xy-list-item>
        </template>
        <!-- tags -->
        <!-- 日期 -->
        <template v-else-if="item.type == 'datepicker'">
            <xy-list-item
                type="input"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    <input
                        type="text"
                        class="input"
                        v-model="formValues[item.name]"
                        :placeholder="item.extra && item.extra.placeholder ? item.extra.placeholder : ''" />
                </template>
            </xy-list-item>
        </template>
        <!-- timepicker -->
        <!-- datetimepicker -->
        <!-- daterangepicker -->
        <!-- datetimerangepicker -->
        <!-- timerangepicker -->
        <!-- rate -->
        <template v-else-if="item.type == 'rate'">
        </template>
        <!-- 级联选择&城市区域选择-->
        <template v-else-if="item.type == 'cascader' || item.type == 'region'">
            <xy-cascader
              :disabled="item.extra.disabled"
              :data="item.extra.options"
              :action="item.extra.action ? item.extra.action : ''"
              v-model="formValues[item.name]"
              size="default">
            </xy-cascader>
        </template>
        <!-- colorpicker -->
        <!-- image -->
        <template v-else-if="item.type == 'image'">
            <xy-list-item
                type="input"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    <xy-upload-image
                        limit="1"
                        :driver="item.extra.driver"
                        :action="item.extra.action"
                        :header="{Authorization: this.token}"
                        :icon="item.extra.icon ? item.extra.icon : 'xyicon-plus'"
                        :label="item.extra.label ? item.extra.label : ''"
                        v-model="formValues[item.name]">
                    </xy-upload-image>
                </template>
            </xy-list-item>
        </template>
        <template v-else-if="item.type == 'images'">
            <xy-list-item
                type="input"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    <xy-upload-image
                        :limit="item.extra.limit ? item.extra.limit : 10"
                        :driver="item.extra.driver"
                        :action="item.extra.action"
                        :header="{Authorization: this.token}"
                        :icon="item.extra.icon ? item.extra.icon : 'xyicon-plus'"
                        :label="item.extra.label ? item.extra.label : ''"
                        v-model="formValues[item.name]">
                    </xy-upload-image>
                </template>
            </xy-list-item>
        </template>
        <!-- imageflex
        file
        files
        listselect
        datalist
        checkboxtree
        formlist -->
        <!-- Markdown -->
        <template v-else-if="item.type == 'markdown'">
            <!-- <ly-markdown
                :showPreview="true"
                :textareaData.sync="formValues[item.name]"
                :textareaHtml.sync="item.temp">
            </ly-markdown> -->
            <xy-list-item
                type="list"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="info">
                    <textarea
                        :auto-height="false"
                        class=""
                        style="height: 100px"
                        v-model="formValues[item.name]"
                        :placeholder="item.extra && item.extra.placeholder ? item.extra.placeholder : ''" />
                </template>
            </xy-list-item>
        </template>
        <!-- html tinymce -->
        <!-- sku商品规格 -->
        <!-- 其它 -->
        <template v-else>
            <xy-list-item
                type="input"
                :title="item.title + ''"
                titleFs="14px">
                <template slot="titleRight">
                    <input
                        v-if="formValues[item.name].constructor == String"
                        type="text"
                        class="input"
                        v-model="formValues[item.name]"
                        :placeholder="item.extra && item.extra.placeholder ? item.extra.placeholder : ''" />
                    <input
                        v-else
                        type="text"
                        class="input"
                        value="暂不支持此类型"
                        :placeholder="item.extra && item.extra.placeholder ? item.extra.placeholder : ''" />
                    </input>
                </template>
            </xy-list-item>
        </template>
	</view>
</template>

<script>
	export default {
		name: 'xyBuilderFormItem',
		props: {
			prop: '',
            item: {},
            formValues: {}
		},
		data() {
			return {
				token: '',
				previewImageVisible: false,
				previewImageUrl: ''
			}
		},
		onLoad() {
			this.token = this.util.getToken();
		},
		methods: {
		}
	}
</script>

<style lang="scss">
    .xybuilder-form-item {
        width: 100%;
        uni-textarea {
            width: 100%;
        }
		.uni-textarea-placeholder,
		.uni-input-placeholder {
			font-size: 16px;
			color: $font-color-light;
		}
    }
</style>
